<template>
  <div class="dc_cesium">
    <div class="dc_tools">
      <!-- <span class="dc_title">gis编辑器</span> -->
      <div class="dc_btns">
        <button @click="refresh">刷新</button>
        <button @click="createSector">创建扇形</button>
        <button @click="createDynamicSector">创建动态扇形</button>
        <!-- <button @click="clearVectorLayer('layer_sector')">删除扇形</button> -->
        <!-- <button @click="createPoint">创建点图标</button> -->
        <!-- <button @click="clearVectorLayer('layer_point')">删除点</button> -->
        <button
          @click="
            createFlowLine([
              [116.54696595187819, 35.090204117211606],
              [116.56189673376728, 35.088723524563804],
              [116.5761690855461, 35.08885951070675],
              [116.57469323448625, 35.08103881546585],
              [116.56698494978565, 35.07308268608532],
              [116.55780132058624, 35.065529777035096],
              [116.55222481491342, 35.0648540911097],
              [116.5477976411696, 35.05932354416037],
              [116.539761413196, 35.05500450547129],
            ])
          "
        >
          创建流动线条
        </button>
        <button @click="clearVectorLayer('layer_flowline')">清除流动线条</button>
        <!-- <button @click="editLine">线条编辑</button> -->
        <!-- <button @click="clearVectorLayer('layer_editline')">删除线条</button> -->
        <!-- <button @click="editAreaHandle">面编辑</button> -->
        <!-- <button @click="clearVectorLayer('layer_editarea')">删除编辑面面</button> -->
        <!-- <button @click="createPolygon">创造多面</button> -->
        <!-- <button @click="clearVectorLayer('layer_polygon')">删除多面</button> -->
        <button @click="createEllipse()">创造椭圆</button>
        <button @click="clearVectorLayer('layer_ellipse')">删除椭圆</button>
        <button @click="createBezierPolygon">创造贝塞尔曲线</button>
        <!-- <button @click="clearVectorLayer('all')">清除所有</button> -->
      </div>
    </div>
    <div class="viewer-container" id="viewer-container"></div>
  </div>
</template>

<script>
import "@dvgis/dc-sdk/dist/dc.min.css"
import * as turf from "@turf/turf"
import { color } from "echarts"
import { parsePositions } from "@/utils.js"

// import { Cartesian3 } from "cesium";
// import * as dat from "dat.gui"
// import * as DC from "@dvgis/dc-sdk"

const dat = require("dat.gui")
let DC = require("@dvgis/dc-sdk")
let viewer = null
let Cesium = null

const LAYER_NAME = {
  POINT: "layer_point",
  POLYGON: "layer_polygon",
  SECTOR: "layer_sector",
  DYSECTOR: "layer_dysector",
  EDITLINE: "layer_editline",
  EDITAREA: "layer_editarea",
  FLWOLINE: "layer_flowline",
  ELLIPSE: "layer_ellipse",
  BEZIER: "layer_bezier",
  GRADUALLINE: "layer_gradualline",
}

const LAYER_CONTAINER = {
  layer_point: null,
  layer_polygon: null,
  layer_editline: null,
  layer_editarea: null,
  layer_sector: null,
  layer_dysector: null,
  layer_flowline: null,
  layer_ellipse: null,
  layer_bezier: null,
  layer_gradualline: null,
}

export default {
  props: {
    mapCenter: {
      type: Array,
      default: () => [116.58027023922142, 35.08000496490045, 10364],
    },
    //1: 2.5D，2: 2D，3: 3D
    mapMode: {
      type: Number,
      default: 3,
    },
    isDebug: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {}
  },
  methods: {
    refresh() {
      location.reload()
    },
    initViewer() {
      Cesium = DC.getLib("Cesium")
      DC.getLib("turf")
      viewer = new DC.Viewer("viewer-container", {
        sceneMode: this.mapMode,
      })

      /* viewer.setOptions({
        // depthPlaneEllipsoidOffset: -50,
        globe: {
          depthTestAgainstTerrain: true,
        },
      }) */

      console.log("Cesium", Cesium)
      console.log("viewer", viewer)
      // 中心点设置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(...this.mapCenter),
      })

      this.loadTdt()

      // tooltip样式
      viewer.popup.config = {
        customClass: "cesium_editor_popup",
      }

      // 罗盘
      viewer.compass.enable = true
      // 底部信息栏
      viewer.locationBar.enable = true
      // 控制器
      // this.addGuiController()

      this.clickLogData()
    },
    // 加载天地图,高精度地图
    loadTdt() {
      let protocol = document.location.protocol
      let pre = ""
      if (protocol === "http:") {
        pre = `//t${parseInt(Math.random() * 6, 10)}.tianditu.com`
      } else {
        pre = `//t${parseInt(Math.random() * 6, 10)}.tianditu.gov.cn`
      }

      let mapUrl = pre + `/DataServer?T=img_w&x={x}&y={y}&l={z}`
      const token = "ec05a54c6ff6ae7bc0f4a50ac9d46342"

      let baseLayer = DC.ImageryLayerFactory.createTdtImageryLayer({
        style: "img",
        crs: "WGS84",
        url: mapUrl,
        key: token,
      })
      /* viewer.addBaseLayer(baseLayer, {
        brightness: 0.1,
      }) */
      let baseLayer2 = DC.ImageryLayerFactory.createWMSImageryLayer({
        url: "/geoserver/yt/wms?",
        layers: "yt:ythgy",
        parameters: {
          transparent: true,
          format: "image/png",
          srs: "EPSG:4326",
        },
      })
      viewer.addBaseLayer([baseLayer, baseLayer2], {
        brightness: 0.1,
      })

      /* let geoLayer = new Cesium.WebMapServiceImageryProvider({
        url: "/geoserver/yt/wms?",
        layers: "yt:ytzt",
        parameters: {
          transparent: true,
          format: "image/png",
          srs: "EPSG:4326",
        },
      }) */
      // viewer.addLayer(geoLayer)
      // console.log(geoLayer)
    },
    // 创建渐变色线条
    createGradualLine(positions) {
      // 不能重复创建
      let layer = LAYER_NAME.GRADUALLINE
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      /* positions = [
        [117.40953088113665, 34.553585356179944],
        [117.43919460192595, 34.551562505116785],
        [117.45777672018036, 34.55101917414437],
        [117.48011381991924, 34.55060587941651],
        [117.49169553880314, 34.55046951453487],
        [117.50147707368082, 34.55060119318948],
        [117.49854085996806, 34.54682606169428],
      ] */

      viewer.addLayer(LAYER_CONTAINER[layer])

      /*  const gradient = "linear-gradient(to top,  blue,red)"
      const color = Cesium.Color.fromCssColorString(gradient) */

      let polyline = new DC.Polyline(positions)
      const getColorRamp = (rampArr, isVertical = false) => {
        let ramp = document.createElement("canvas")
        ramp.width = isVertical ? 1 : 100
        ramp.height = isVertical ? 100 : 1
        let ctx = ramp.getContext("2d")
        if (ctx) {
          let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0)
          rampArr.forEach(rampObj => {
            grd.addColorStop(rampObj.level, rampObj.color)
          })

          ctx.fillStyle = grd
          if (isVertical) {
            ctx.fillRect(0, 0, 1, 100)
          } else {
            ctx.fillRect(0, 0, 100, 1)
          }
        }
        return ramp
      }

      // let polyline = new DC.Polyline(lines)

      polyline.setStyle({
        width: 20,
        material: getColorRamp(
          [
            { level: 0, color: "red" },
            { level: 0.1, color: "red" },
            { level: 0.3, color: "orange" },
            { level: 0.6, color: "yellow" },
            { level: 0.8, color: "green" },
            { level: 1, color: "blue" },
          ],
          false,
        ),
        clampToGround: true,
      })

      /* polyline.setStyle({
        width: 40,
        material: new DC.PolylineLightingTrailMaterialProperty({
          color: DC.Color.YELLOW,
          speed: 5.0,
        }),
        // clampToGround: true,
        zIndex: 2,
      })
       */
      LAYER_CONTAINER[layer].addOverlay(polyline)
      // viewer.flyTo(layer)
    },
    createEllipse() {
      let layer = LAYER_NAME.ELLIPSE
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      viewer.addLayer(LAYER_CONTAINER[layer])

      let center = [116.57841114675978, 35.08500891849115]
      /* let xSemiAxis = 5
      let ySemiAxis = 2
      let ellipse = turf.ellipse(center, xSemiAxis, ySemiAxis) */

      // let center = DC.Position.fromObject({ lng: 116.57841114675978, lat: 35.08500891849115 })
      /* let circle = new DC.Circle(center,3000)
    circle.setStyle({
        material: DC.Color.RED.withAlpha(0.2)
    })
    layer.addOverlay(circle) */

      let position = new DC.Position(...center)
      let ellipse = new DC.Ellipse(position, 500, 200)
      ellipse._delegate.ellipse.shadows = false
      // let ellipse = new DC.Circle(center, 3000)
      // let polygon = new DC.Polygon(ellipse)
      console.log("ellipse", ellipse)
      ellipse.setStyle({
        material: DC.Color.YELLOW.withAlpha(0.5),
        zIndex: 1,
        // 同时必须 heightReference,height 防止闪烁bug
        heightReference: 0,
        height: 0,
        rotation: 60,
      })
      LAYER_CONTAINER[layer].addOverlay(ellipse)
      // viewer.flyTo(ellipse)
    },
    // 贝塞尔曲线多边形
    createBezierPolygon() {
      var fromPoint = [116.57797363621783, 35.08752590320633] // 起始点的经纬度
      var distance = 2 // 移动的距离，单位是公里
      var bearing1 = 60 // 方向左中右
      var bearing2 = 90
      var bearing3 = 120

      var destinationPoint1 = turf.destination(fromPoint, distance, bearing1)
      var destinationPoint2 = turf.destination(fromPoint, distance * 1.2, bearing2)
      var destinationPoint3 = turf.destination(fromPoint, distance, bearing3)
      let distance_high = 1
      var destinationPoint1_high = turf.destination(fromPoint, distance_high, bearing1)
      var destinationPoint2_high = turf.destination(fromPoint, distance_high * 1.2, bearing2)
      var destinationPoint3_high = turf.destination(fromPoint, distance_high, bearing3)

      var line = turf.lineString([
        fromPoint,
        destinationPoint1.geometry.coordinates,
        destinationPoint2.geometry.coordinates,
        destinationPoint3.geometry.coordinates,
        fromPoint,
      ])
      var curved = turf.bezierSpline(line)
      var line_high = turf.lineString([
        fromPoint,
        destinationPoint1_high.geometry.coordinates,
        destinationPoint2_high.geometry.coordinates,
        destinationPoint3_high.geometry.coordinates,
        fromPoint,
      ])
      var curved_high = turf.bezierSpline(line_high)

      let layer = LAYER_NAME.BEZIER
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      viewer.addLayer(LAYER_CONTAINER[layer])

      let polygon = new DC.Polygon(curved.geometry.coordinates)
      polygon._delegate.polygon.perPositionHeight = true
      polygon.setStyle({
        material: DC.Color.YELLOW.withAlpha(0.5),
        zIndex: 1,
      })
      LAYER_CONTAINER[layer].addOverlay(polygon)

      let polygon_high = new DC.Polygon(curved_high.geometry.coordinates)
      polygon_high._delegate.polygon.perPositionHeight = true
      polygon_high.setStyle({
        material: DC.Color.RED.withAlpha(0.5),
        zIndex: 2,
      })
      LAYER_CONTAINER[layer].addOverlay(polygon_high)
    },
    // 创建线条流动
    createFlowLine(positions) {
      // 不能重复创建
      let layer = LAYER_NAME.FLWOLINE
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      /* positions = [
        [117.40953088113665, 34.553585356179944],
        [117.43919460192595, 34.551562505116785],
        [117.45777672018036, 34.55101917414437],
        [117.48011381991924, 34.55060587941651],
        [117.49169553880314, 34.55046951453487],
        [117.50147707368082, 34.55060119318948],
        [117.49854085996806, 34.54682606169428],
      ] */

      viewer.addLayer(LAYER_CONTAINER[layer])

      /*  const gradient = "linear-gradient(to top,  blue,red)"
      const color = Cesium.Color.fromCssColorString(gradient) */

      let polyline = new DC.Polyline(positions)
      const getColorRamp = (rampArr, isVertical = false) => {
        let ramp = document.createElement("canvas")
        ramp.width = isVertical ? 1 : 100
        ramp.height = isVertical ? 100 : 1
        let ctx = ramp.getContext("2d")
        if (ctx) {
          let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0)
          rampArr.forEach(rampObj => {
            grd.addColorStop(rampObj.level, rampObj.color)
          })

          ctx.fillStyle = grd
          if (isVertical) {
            ctx.fillRect(0, 0, 1, 100)
          } else {
            ctx.fillRect(0, 0, 100, 1)
          }
        }
        return ramp
      }

      // let polyline = new DC.Polyline(lines)

      polyline.setStyle({
        width: 20,
        material: getColorRamp(
          [
            { level: 0, color: "red" },
            { level: 0.5, color: "yellow" },
            { level: 1, color: "blue" },
          ],
          false,
        ),
        clampToGround: true,
      })

      /* polyline.setStyle({
        width: 40,
        material: new DC.PolylineLightingTrailMaterialProperty({
          color: DC.Color.YELLOW,
          speed: 5.0,
        }),
        // clampToGround: true,
        zIndex: 2,
      })
       */
      LAYER_CONTAINER[layer].addOverlay(polyline)
      // viewer.flyTo(layer)
    },
    // 创建饼图扇形 3d模式有bug 用2d模式
    createSector() {
      let layer = LAYER_NAME.SECTOR
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      viewer.addLayer(LAYER_CONTAINER[layer])
      //  viewer._delegate.polygon.perPositionHeight = true

      /* let circle = new DC.Circle("117.42517555231305, 34.54810356439173", 510)
      circle.setStyle({
        material: DC.Color.YELLOW.withAlpha(0.5),

        zIndex: 1,
      })
      LAYER_CONTAINER[layer].addOverlay(circle) */
      // 经纬度 半径  角度初始 角度结束
      let polygon = new DC.Polygon(DC.GeoTools.sector("116.58174641526757, 35.07604993636396", 510, 0, 30))
      console.log("polygon", polygon)
      polygon._delegate.polygon.perPositionHeight = true

      /* let polygon = new DC.Polygon([
        [117.42935876906655, 34.55945512430701],
        [117.44128953403046, 34.55587881783505],
        [117.43368221530271, 34.54987071642922],
      ]) */

      let gradientMaterial = new Cesium.ImageMaterialProperty({
        image: document.getElementById("myCanvas"),
        // transparent: true,
      })

      polygon.setStyle({
        material: DC.Color.RED,
        // material: gradientMaterial,
        // height: 0,
        // extrudedHeight: 0,
        // height: 1,
        // heightReference: 2,
        zIndex: 1,
      })
      LAYER_CONTAINER[layer].addOverlay(polygon)
      let polygon2 = new DC.Polygon(DC.GeoTools.sector("116.58174641526757, 35.07604993636396", 510, 31, 360))

      polygon2.setStyle({
        material: DC.Color.BLUE,
        // material: gradientMaterial,
        // height: 1,
        // heightReference: 2,
        // extrudedHeight: 0,
        zIndex: 2,
      })
      polygon2._delegate.polygon.perPositionHeight = true
      LAYER_CONTAINER[layer].addOverlay(polygon2)

      // viewer.flyTo(LAYER_CONTAINER[layer])
      /* polygon = new DC.Polygon(DC.GeoTools.sector("117.42966439844761,34.51702423275399", 100, 220, 360))
      polygon.setStyle({
        material: DC.Color.BLUE.withAlpha(0.6),
        outline: true,
        extrudedHeight: 1,
      })
      this._flowLineLayer.addOverlay(polygon)

      polygon = new DC.Polygon(DC.GeoTools.sector("117.42966439844761,34.51702423275399", 100, 300, 340))
      polygon.setStyle({
        material: DC.Color.RED,
        extrudedHeight: 5,
      })
      this._flowLineLayer.addOverlay(polygon) */
      viewer.flyTo(polygon2)
    },
    // 动态扇形
    createDynamicSector() {
      let layer = LAYER_NAME.DYSECTOR
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      viewer.addLayer(LAYER_CONTAINER[layer])

      let polygon = new DC.Polygon(DC.GeoTools.sector("116.57939364491786,35.09404512502546", 510, 0, 30))
      console.log("polygon", polygon)
      polygon._delegate.polygon.perPositionHeight = true
      polygon.setStyle({
        material: DC.Color.RED,
        zIndex: 1,
      })
      LAYER_CONTAINER[layer].addOverlay(polygon)
      console.log("polygon", polygon)
      setTimeout(() => {
        polygon.setStyle({
          material: DC.Color.YELLOW,
          zIndex: 1,
          positions: DC.GeoTools.sector("116.57939364491786,35.09404512502546", 600, 0, 30),
        })
      }, 3000)
    },
    // 创建多面
    createPolygon() {
      let layer = LAYER_NAME.POLYGON
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)
      viewer.addLayer(LAYER_CONTAINER[layer])

      let positions = [
        [117.46987294753902, 34.56711342837164],
        [117.52966762751916, 34.56899884136965],
        [117.52366574492298, 34.59085624262514],
        [117.46710282335926, 34.59126370085518],
        [117.46987294753902, 34.56711342837164],
      ]
      // console.log(this.arrayToString(positions))

      let polygon = new DC.Polygon(positions)
      polygon._delegate.polygon.perPositionHeight = true

      // let polygon = new DC.Polygon("-108.0, 42.0; -100.0, 42.0;-104.0, 40.0")
      polygon.setStyle({
        material: DC.Color.RED.withAlpha(0.6),
      })
      LAYER_CONTAINER[layer].addOverlay(polygon)
      // viewer.flyTo(LAYER_CONTAINER[layer])
    },
    // 线条编辑
    editLine() {
      let layer = LAYER_NAME.EDITLINE
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)

      let finishLine = null
      let finishArea = null
      viewer.addLayer(LAYER_CONTAINER[layer])
      let plot = new DC.Plot(viewer)
      plot.draw("polyline", overlay => {
        // console.log("draw_polyline")
        // _positions.length == 1 时等于直接右键结束标记一个点 未成两点一线
        if (overlay && overlay.positions.length > 1) {
          // LAYER_CONTAINER[layer].addOverlay(overlay)
          // 二次编辑 2d 编辑功能有bug
          /* plot.edit(overlay,()=>{
            console.log('stop');
          }) */
          finishLine = overlay.positions.map(e => {
            return [e._lng, e._lat]
          })
          console.log(finishLine)
          this.createFlowLine(overlay.positions)
          // console.log("overlay", overlay)
          this.$emit("editLineComplete", finishLine)
        }
      })
    },
    // 编辑面
    editAreaHandle() {
      let layer = LAYER_NAME.EDITAREA
      if (LAYER_CONTAINER[layer]) {
        this.clearVectorLayer(layer)
      }
      LAYER_CONTAINER[layer] = new DC.VectorLayer(layer)

      let finishArea = null
      viewer.addLayer(LAYER_CONTAINER[layer])

      let plot = new DC.Plot(viewer)

      plot.draw("polygon", overlay => {
        // console.log("draw_polygon")
        // _positions.length == 1 时等于直接右键结束标记一个点 未成两点一线
        if (overlay && overlay._positions.length > 2) {
          // 防止闪烁
          overlay.setStyle({
            material: DC.Color.DEEPSKYBLUE.withAlpha(0.5),
          })
          overlay._delegate.polygon.perPositionHeight = true
          LAYER_CONTAINER[layer].addOverlay(overlay)
          // console.log(overlay)

          // 二次编辑 2d 编辑功能有bug
          /* plot.edit(overlay,()=>{
            console.log('stop');
          }) */
          finishArea = overlay.positions.map(e => {
            return [e._lng, e._lat]
          })
          console.log(finishArea)
          // console.log("overlay", overlay)
          this.$emit("editAreaComplete", finishArea)
        }
      })
    },
    // 点击标记 (经纬高 视角)
    clickLogData() {
      let self = this
      // 点击获取经纬度
      if (this.isDebug) {
        /* viewer.on(DC.MouseEventType.CLICK, e => {
          console.log(e)
        }) */
        // 监听点击事件
        viewer._delegate.screenSpaceEventHandler.setInputAction(function (click) {
          if (!self.isDebug) return
          console.log("click-------------------------", click)
          // 获取点击位置的世界坐标s
          var cartesian = viewer._delegate.scene.globe.pick(
            viewer._delegate.camera.getPickRay(click.position),
            viewer._delegate.scene,
          )
          if (cartesian) {
            // 转换为地理坐标系
            var cartographic = viewer._delegate.scene.globe.ellipsoid.cartesianToCartographic(cartesian)
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude)
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude)
            // 输出坐标
            console.log("addEventListener click 经纬度:", [longitudeString, latitudeString])
          }
          // 获取当前视角定位信息
          let cameraPosition = viewer.camera.position

          // 将相机位置转换为Cartographic对象，获取经纬度和高度
          let cartographic_camera = Cesium.Cartographic.fromCartesian(cameraPosition)
          let longitude = Cesium.Math.toDegrees(cartographic_camera.longitude)
          let latitude = Cesium.Math.toDegrees(cartographic_camera.latitude)
          let height = cartographic_camera.height

          console.log("当前经纬高:", [longitude, latitude, height])

          // 获取相机的旋转角度
          // 注意：旋转角度是以四元数(Quaternion)表示的，需要转换为欧拉角(Euler angles)
          let rotation = viewer.camera.heading // 方位角（东向为0度）
          let pitch = viewer.camera.pitch // 俯仰角（向上为0度）
          let roll = viewer.camera.roll // 翻滚角（无旋转为0度）

          console.log("当前旋转角:", [rotation, pitch, roll])
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      }
    },
    // 点图标
    createPoint(dataList) {
      dataList = [
        {
          position: [117.42558856, 34.56447147],
          img: require("@/assets/fqpfk.png"),
          name: "张三",
        },
        {
          position: [117.42558856, 34.54447147],
          img: require("@/assets/zcycd.png"),
          name: "李四",
        },
      ]
      // 检查图层 - 重置
      if (LAYER_CONTAINER[LAYER_NAME.POINT]) {
        this.clearVectorLayer(LAYER_NAME.POINT)
      }
      LAYER_CONTAINER[LAYER_NAME.POINT] = new DC.VectorLayer(LAYER_NAME.POINT)
      viewer.addLayer(LAYER_CONTAINER[LAYER_NAME.POINT])

      dataList.forEach(e => {
        let point = new DC.Position(...e.position)
        // let img = require("@/assets/point.png")
        let billboard = new DC.Billboard(point, e.img)
        billboard.setStyle({
          // 初始是中心点
          pixelOffset: { x: 0, y: -20 },
        })
        billboard.size = [30, 40]
        billboard.attr = {
          index: 5,
          name: e.name,
        }
        billboard.on(DC.MouseEventType.CLICK, e => {
          // console.log(e)
          viewer.popup.showAt(e.position, `我是第${e.overlay.attr.index}点,name:${e.overlay.attr.name}`)
          setTimeout(() => {
            viewer.popup.hide()
          }, 3000)
        })
        LAYER_CONTAINER[LAYER_NAME.POINT].addOverlay(billboard)
      })
    },
    // 添加底部工具栏
    addGuiController() {
      let controls = {
        enable: true,
      }
      let gui = new dat.GUI()
      gui.add(controls, "enable").onChange(value => {
        viewer.locationBar.enable = value
        viewer.compass.enable = value
      })
    },
    clearVectorLayer(type) {
      if (type == "all") {
        Object.entries(LAYER_CONTAINER).forEach(e => {
          let layerName = e[0]
          let contanier = e[1]
          if (contanier) {
            contanier.clear()
            viewer.removeLayer(LAYER_CONTAINER[layerName])
            LAYER_CONTAINER[layerName] = null
          }
        })
      } else if (LAYER_CONTAINER[type]) {
        LAYER_CONTAINER[type].clear()
        viewer.removeLayer(LAYER_CONTAINER[type])
        LAYER_CONTAINER[type] = null
      }
    },
  },
  mounted() {
    DC.ready({ turf }).then(() => {
      // console.log("DC", DC)
      this.initViewer()
    })
  },
  created() {},
}
</script>

<style lang="scss">
.dc_cesium {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  .dc_tools {
    position: absolute;
    z-index: 2;
    top: 0;
    padding: 10px;
    padding-right: 70px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    // background: #eee;
    .dc_title {
      font-size: 18px;
    }
    .dc_btns {
      button + button {
        margin: 3px 5px;
      }
    }
  }
  .viewer-container {
    // 编辑线需要添加定位 否则效果偏移
    position: relative;
    width: 100%;
    height: 100%;
  }
  // 底部信息
  .widget.location-bar {
    left: unset;
    right: 0;
  }
  .cesium_editor_popup {
    font-size: 14px;
  }
}
</style>
